<template>
	<view class="detailshearder">
		<view class="detailshearder_navbox" :style="{height: navHeight+'px'}">
			<view class="detailshearder_navboxicon" @click="goBack">
				<image class="detailshearder_navboximg" src="https://s4.ax1x.com/2022/01/27/7Oz5Bd.png"></image>
			</view>
		</view>
		<view class="detailshearder_posterbox">
			<view class="detailshearder_box" v-if="photoIndex == 1">
				<image class="detailshearder_poster" :src="srcPhoto"></image>
			</view>
			
			<image v-else-if="photoIndex == 0" class="detailshearder_poster" :src="srcPhoto"></image>
		
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			menuButtonInfo: {
				type: Object
			},
			photoIndex: {
				type: Number
			},
			srcPhoto: {
				type: String
			},
		},
		watch:{
			menuButtonInfo(newVal,oldVal){
				this.navHeight = newVal.top + newVal.height +10;
				console.log('menuButtonInfo--->',newVal)
			}
		},
		methods:{
			goBack(){
				this.$emit("goBack");
			}
		},
		data() {
			return {
				navHeight: 0
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.detailshearder{
		width: 100%;
		.detailshearder_navbox{
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
		}
		.detailshearder_navboxicon{
			height: 100%;
			width: 30%;
			position: relative;
		}
		.detailshearder_navboximg{
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			left: 40rpx;
			bottom: 16rpx;
		}
		.detailshearder_box{
			width: 686rpx;
			height: 440rpx;
			border-radius: 16rpx;
			background-color: #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.detailshearder_posterbox{
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.detailshearder_poster{
				width: 412rpx;
				height: 412rpx;
			}
		}
		
	}
</style>
